<template>
  <view class="app">
    <view class="back-btn mix-icon icon-xiangzuo" @click="navBack"></view>
    <view class="page-tip">消息</view>
    <view class="page-msg row" @click="clearAll">
      <image
        class="msg-img"
        src="/static/qingchu@2x.png"
        mode="aspectFit"
      ></image
      >全部已读</view
    >
    <view class="msg-wrapper">
      <view class="msg-panel column" @click="showMsgDetail">
        <view class="msg-item row">
          <view class="msg-title">订单通知</view>
          <view class="msg-date">12:18</view>
        </view>
        <view class="msg-item row">
          <view class="msg-desc"
            >您出售的作品（作品名称）已经出售成功，请查看</view
          >
          <view class="msg-hot">
            <image
              class="circle-img"
              src="/static/circle@2x.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
      </view>

      <view class="msg-panel column" @click="showMsgDetail">
        <view class="msg-item row">
          <view class="msg-title">平台公告</view>
          <view class="msg-date">昨天</view>
        </view>
        <view class="msg-item row">
          <view class="msg-desc">功能内容</view>
          <view class="msg-hot">
            <image
              class="circle-img"
              src="/static/circle@2x.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
      </view>

      <view class="msg-panel column" @click="showMsgDetail">
        <view class="msg-item row">
          <view class="msg-title">平台公告</view>
          <view class="msg-date">昨天</view>
        </view>
        <view class="msg-item row">
          <view class="msg-desc">功能内容</view>
          <view class="msg-hot">
            <image
              class="circle-img"
              src="/static/circle@2x.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
      </view>

      <view class="msg-panel column" @click="showMsgDetail">
        <view class="msg-item row">
          <view class="msg-title">平台公告</view>
          <view class="msg-date">昨天</view>
        </view>
        <view class="msg-item row">
          <view class="msg-desc">功能内容</view>
          <view class="msg-hot">
            <image
              class="circle-img"
              src="/static/circle@2x.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      List: [],
    };
  },
  onLoad() {},
  methods: {
    navBack() {
      uni.navigateBack();
    },
    clearAll() {
      console.log('🚀 ~ clearAll ~ clearAll:');
    },
    showMsgDetail() {
      this.navTo('/pages/mine/msgDetail?id=1');
    },
  },
};
</script>

<style scoped lang="scss">
.app {
  padding-top: calc(var(--status-bar-height) + 40rpx);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  // background: #f7f8f9;
}
.back-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 34rpx;
  color: #222222;
}
.page-tip {
  position: absolute;
  left: 50%;
  top: calc(var(--status-bar-height) + 40rpx);
  z-index: 90;
  margin-left: -40rpx;
  font-size: 32rpx;
  color: #222222;
  line-height: 32rpx;
}
.page-msg {
  position: absolute;
  right: 50rpx;
  top: calc(var(--status-bar-height) + 40rpx);
  z-index: 90;
  font-size: 24rpx;
  color: #666666;
  line-height: 24rpx;
  .msg-img {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }
}
.msg-wrapper {
  margin-top: 60rpx;
  background: #f7f8f9;
  width: 100vw;
  height: 100vh;
  padding-top: 1rpx;
  .msg-panel {
    margin-top: 26rpx;
    background: #fff;
    padding: 10rpx 44rpx 0;
    border-radius: 30rpx;
    .msg-item {
      justify-content: space-between;
      height: 60rpx;
      .msg-title {
        font-size: 32rpx;
        color: #222222;
      }
      .msg-date {
        color: #666666;
      }
      .msg-desc {
        font-size: 26rpx;
        color: #666666;
      }
      .msg-hot {
        .circle-img {
          width: 16rpx;
          height: 16rpx;
        }
      }
    }
  }
}
</style>
